<template>
  <view class="course-detail-page">
    <!-- 顶部导航栏 -->
    <up-navbar title="课程详情" :bgColor="bgColor" height="50" fixed placeholder>
      <template #left>
        <up-icon name="arrow-left" @click="goBack"></up-icon>
      </template>
      <template #right>
        <up-icon name="more-dot-fill" @click="showMenu"></up-icon>
      </template>
    </up-navbar>

    <!-- 课程封面 -->
    <view class="course-cover">
      <image :src="courseDetail.cover" mode="aspectFill" class="cover-image"></image>
      <view class="cover-mask"></view>
      <view class="course-title">
        <text class="title">{{ courseDetail.title }}</text>
        <text class="instructor">讲师：{{ courseDetail.instructor }}</text>
      </view>
    </view>

    <!-- 课程信息 -->
    <view class="course-info">
      <view class="info-item">
        <up-icon name="clock" size="16" color="#999"></up-icon>
        <text class="info-text">{{ courseDetail.duration }}</text>
      </view>
      <view class="info-item">
        <up-icon name="person" size="16" color="#999"></up-icon>
        <text class="info-text">{{ courseDetail.students }}人已学习</text>
      </view>
      <view class="info-item">
        <up-icon name="star" size="16" color="#FFD700"></up-icon>
        <text class="info-text">{{ courseDetail.rating }}分</text>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="price-section">
      <view class="price-container">
        <text v-if="courseDetail.isFree" class="free-tag">免费</text>
        <text v-else class="price">¥{{ courseDetail.price }}</text>
        <text v-if="!courseDetail.isFree && courseDetail.originalPrice > courseDetail.price" class="original-price">¥{{ courseDetail.originalPrice }}</text>
      </view>
    </view>

    <!-- 课程介绍 -->
    <view class="section">
      <view class="section-title">
        <up-icon name="file-text" color="#333" size="18"></up-icon>
        <text>课程介绍</text>
      </view>
      <view class="section-content">
        <u-parse :content="courseDetail.description" />
      </view>
    </view>

    <!-- 课程目录 -->
    <view class="section">
      <view class="section-title">
        <up-icon name="list" color="#333" size="18"></up-icon>
        <text>课程目录</text>
      </view>
      <view class="section-content">
        <view class="chapter-list">
          <view 
            class="chapter-item" 
            v-for="(chapter, index) in courseDetail.chapters" 
            :key="index"
            @click="selectChapter(index)"
          >
            <view class="chapter-header">
              <text class="chapter-title">{{ chapter.title }}</text>
              <up-icon 
                :name="currentChapterIndex === index ? 'arrow-up' : 'arrow-down'" 
                size="14" 
                color="#999"
              ></up-icon>
            </view>
            <view v-show="currentChapterIndex === index" class="chapter-content">
              <view 
                class="lesson-item" 
                v-for="(lesson, lessonIndex) in chapter.lessons" 
                :key="lessonIndex"
                @click.stop="playLesson(lesson)"
              >
                <view class="lesson-info">
                  <up-icon 
                    :name="lesson.isFree || !courseDetail.isFree ? 'play-circle' : 'lock'" 
                    size="16" 
                    :color="lesson.isFree || !courseDetail.isFree ? '#4ecdc4' : '#ccc'"
                  ></up-icon>
                  <text class="lesson-title">{{ lesson.title }}</text>
                </view>
                <view class="lesson-meta">
                  <text class="lesson-duration">{{ lesson.duration }}</text>
                  <text v-if="lesson.isFree" class="free-label">免费</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 课程评价 -->
    <view class="section">
      <view class="section-title">
        <up-icon name="chat" color="#333" size="18"></up-icon>
        <text>学员评价 ({{ courseDetail.comments.length }})</text>
      </view>
      <view class="section-content">
        <view class="comment-list">
          <view class="comment-item" v-for="(comment, index) in courseDetail.comments" :key="index">
            <image :src="comment.avatar" class="avatar"></image>
            <view class="comment-content">
              <view class="comment-header">
                <text class="username">{{ comment.username }}</text>
                <up-rate :value="comment.rating" readonly size="14" activeColor="#FFD700"></up-rate>
              </view>
              <text class="comment-text">{{ comment.content }}</text>
              <text class="comment-time">{{ comment.time }}</text>
            </view>
          </view>
        </view>
        <view class="more-comments" @click="viewAllComments">
          <text>查看全部评价</text>
          <up-icon name="arrow-right" size="14" color="#999"></up-icon>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-buttons">
        <view class="action-item" @click="toggleFavorite">
          <up-icon 
            :name="isFavorited ? 'heart-fill' : 'heart'" 
            size="20" 
            :color="isFavorited ? '#ff4757' : '#999'"
          ></up-icon>
          <text :class="{ active: isFavorited }">收藏</text>
        </view>
        <view class="action-item" @click="shareCourse">
          <up-icon name="share" size="20" color="#999"></up-icon>
          <text>分享</text>
        </view>
      </view>
      <view class="purchase-section">
        <up-button 
          v-if="courseDetail.isFree || hasPurchased" 
          type="primary" 
          size="large" 
          class="play-btn"
          @click="playFirstLesson"
        >
          {{ hasPurchased || courseDetail.isFree ? '开始学习' : '立即购买' }}
        </up-button>
        <up-button 
          v-else
          type="primary" 
          size="large" 
          class="buy-btn"
          @click="purchaseCourse"
        >
          立即购买 ¥{{ courseDetail.price }}
        </up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 页面数据
const bgColor = ref('#fff')
const isFavorited = ref(false)
const hasPurchased = ref(false)
const currentChapterIndex = ref(0)
const courseId = ref(0)

// 课程详情数据
const courseDetail = reactive({
  id: 1,
  title: '',
  instructor: '',
  cover: '',
  duration: '',
  price: 0,
  originalPrice: 0,
  students: 0,
  rating: 0,
  isFree: false,
  isNew: false,
  description: '',
  chapters: [],
  comments: []
})

// 页面初始化
onMounted(() => {
  // 获取课程ID
  const pages = getCurrentPages()
  const current = pages[pages.length - 1]
  const options = current.options || {}
  courseId.value = options.id || 0
  
  // 加载课程详情
  loadCourseDetail(courseId.value)
})

// 加载课程详情
const loadCourseDetail = (id) => {
  // 模拟API请求
  // 实际项目中应该替换为真实的API调用
  Object.assign(courseDetail, {
    id: parseInt(id),
    title: '王羲之行书技法精讲',
    instructor: '张老师',
    cover: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
    duration: '2小时30分钟',
    price: 199,
    originalPrice: 299,
    students: 1280,
    rating: 4.8,
    isFree: false,
    isNew: true,
    description: '<p>本课程详细讲解王羲之行书的技法精髓，通过分析《兰亭序》等经典作品，帮助学员掌握行书的笔法、结构和章法特点。</p><p>课程内容包括：</p><ul><li>王羲之生平与书法风格</li><li>行书基本笔画技法</li><li>《兰亭序》逐字解析</li><li>行书创作实践指导</li></ul>',
    chapters: [
      {
        title: '第一章：王羲之与行书概述',
        lessons: [
          { title: '王羲之生平介绍', duration: '15:30', isFree: true },
          { title: '行书发展历史', duration: '18:20', isFree: true },
          { title: '王羲之书法风格特点', duration: '22:15', isFree: false }
        ]
      },
      {
        title: '第二章：行书基本笔画',
        lessons: [
          { title: '点画的写法', duration: '12:45', isFree: true },
          { title: '横画的写法', duration: '14:20', isFree: true },
          { title: '竖画的写法', duration: '16:30', isFree: false },
          { title: '撇画的写法', duration: '13:45', isFree: false }
        ]
      },
      {
        title: '第三章：《兰亭序》解析',
        lessons: [
          { title: '《兰亭序》整体赏析', duration: '25:10', isFree: false },
          { title: '前段逐字分析', duration: '32:15', isFree: false },
          { title: '中段逐字分析', duration: '28:40', isFree: false },
          { title: '后段逐字分析', duration: '30:20', isFree: false }
        ]
      },
      {
        title: '第四章：行书创作实践',
        lessons: [
          { title: '行书创作要点', duration: '20:15', isFree: false },
          { title: '作品临摹指导', duration: '24:30', isFree: false },
          { title: '独立创作练习', duration: '26:45', isFree: false }
        ]
      }
    ],
    comments: [
      {
        avatar: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
        username: '书法爱好者',
        rating: 5,
        content: '老师讲解非常详细，对王羲之行书的理解更深入了，推荐！',
        time: '2024-06-15'
      },
      {
        avatar: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
        username: '初学者',
        rating: 4,
        content: '内容很丰富，适合有一定基础的同学学习。',
        time: '2024-06-10'
      },
      {
        avatar: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg',
        username: '书法老师',
        rating: 5,
        content: '作为同行，觉得这个课程质量很高，值得推荐给学生。',
        time: '2024-06-05'
      }
    ]
  })
}

// 页面跳转
const goBack = () => {
  uni.navigateBack()
}

// 菜单操作
const showMenu = () => {
  uni.showActionSheet({
    itemList: ['分享课程', '投诉举报', '取消'],
    success: (res) => {
      if (res.tapIndex === 0) {
        shareCourse()
      } else if (res.tapIndex === 1) {
        uni.showToast({
          title: '已收到您的反馈',
          icon: 'none'
        })
      }
    }
  })
}

// 章节选择
const selectChapter = (index) => {
  if (currentChapterIndex.value === index) {
    currentChapterIndex.value = -1
  } else {
    currentChapterIndex.value = index
  }
}

// 播放课程
const playLesson = (lesson) => {
  if (courseDetail.isFree || lesson.isFree || hasPurchased.value) {
    // 跳转到视频播放页面
    uni.navigateTo({
      url: `/gallery_pages/course/video?courseId=${courseId.value}&lessonTitle=${encodeURIComponent(lesson.title)}`
    })
  } else {
    uni.showToast({
      title: '请先购买课程',
      icon: 'none'
    })
  }
}

// 播放第一个课程
const playFirstLesson = () => {
  if (courseDetail.chapters.length > 0 && courseDetail.chapters[0].lessons.length > 0) {
    const firstLesson = courseDetail.chapters[0].lessons[0]
    playLesson(firstLesson)
  }
}

// 购买课程
const purchaseCourse = () => {
  uni.showModal({
    title: '确认购买',
    content: `是否确认购买《${courseDetail.title}》课程，价格：¥${courseDetail.price}？`,
    success: (res) => {
      if (res.confirm) {
        // 模拟购买流程
        uni.showToast({
          title: '购买成功',
          icon: 'success'
        })
        hasPurchased.value = true
      }
    }
  })
}

// 收藏课程
const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value
  uni.showToast({
    title: isFavorited.value ? '已收藏' : '已取消收藏',
    icon: isFavorited.value ? 'success' : 'none'
  })
}

// 分享课程
const shareCourse = () => {
  uni.showToast({
    title: '分享功能开发中',
    icon: 'none'
  })
}

// 查看所有评价
const viewAllComments = () => {
  uni.showToast({
    title: '评价详情页开发中',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.course-detail-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: 120rpx;
}

.course-cover {
  position: relative;
  height: 400rpx;
  
  .cover-image {
    width: 100%;
    height: 100%;
  }
  
  .cover-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));
  }
  
  .course-title {
    position: absolute;
    bottom: 30rpx;
    left: 30rpx;
    right: 30rpx;
    color: #fff;
    
    .title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .instructor {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }
}

.course-info {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .info-text {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
}

.price-section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .price-container {
    display: flex;
    align-items: center;
    
    .free-tag {
      font-size: 32rpx;
      color: #4ecdc4;
      font-weight: bold;
    }
    
    .price {
      font-size: 40rpx;
      color: #ff4757;
      font-weight: bold;
      margin-right: 20rpx;
    }
    
    .original-price {
      font-size: 28rpx;
      color: #999;
      text-decoration: line-through;
    }
  }
}

.section {
  background: #fff;
  margin: 0 20rpx 20rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 30rpx;
    
    text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .section-content {
    .chapter-list {
      .chapter-item {
        margin-bottom: 20rpx;
        border: 1rpx solid #eee;
        border-radius: 15rpx;
        overflow: hidden;
        
        .chapter-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx;
          background: #f9f9f9;
          
          .chapter-title {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
          }
        }
        
        .chapter-content {
          padding: 20rpx;
          
          .lesson-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 1rpx solid #eee;
            
            &:last-child {
              border-bottom: none;
            }
            
            .lesson-info {
              display: flex;
              align-items: center;
              flex: 1;
              
              .lesson-title {
                font-size: 26rpx;
                color: #333;
                margin-left: 15rpx;
              }
            }
            
            .lesson-meta {
              display: flex;
              align-items: center;
              
              .lesson-duration {
                font-size: 24rpx;
                color: #999;
                margin-right: 15rpx;
              }
              
              .free-label {
                font-size: 20rpx;
                color: #4ecdc4;
                background: rgba(78, 205, 196, 0.1);
                padding: 4rpx 10rpx;
                border-radius: 6rpx;
              }
            }
          }
        }
      }
    }
    
    .comment-list {
      .comment-item {
        display: flex;
        margin-bottom: 30rpx;
        
        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        
        .comment-content {
          flex: 1;
          
          .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10rpx;
            
            .username {
              font-size: 26rpx;
              font-weight: 500;
              color: #333;
            }
          }
          
          .comment-text {
            font-size: 24rpx;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10rpx;
          }
          
          .comment-time {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
    
    .more-comments {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx;
      color: #999;
      font-size: 26rpx;
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .action-buttons {
    display: flex;
    margin-right: 30rpx;
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40rpx;
      
      text {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
        
        &.active {
          color: #ff4757;
        }
      }
    }
  }
  
  .purchase-section {
    flex: 1;
    
    .play-btn, .buy-btn {
      width: 100%;
    }
  }
}
</style>